<template>
<div>
  <Modal v-model="visible" :title="title" @ok="handleOk" v-if="visible">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">Return</a-button>
      <a-button key="submit" type="primary" @click="handleOk" :loading="loading">Submit</a-button>
    </template>
    <a-form :form="form" @submit="handleSubmit">
      <!-- 名称 -->
      <a-form-item label="名称:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input v-model="listData.title" />
      </a-form-item>
      <a-form-item label="颜色:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <div style="display:flex">
          <a-input type="color" v-model="listData.color" />
          <a-input v-model="listData.color" />
        </div>
      </a-form-item>

      <a-form-item label="类别:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select :default-value="listData.category + ''" @change="floorChange">
          <a-select-option value="1">底图</a-select-option>
          <a-select-option value="2">洞</a-select-option>
          <a-select-option value="3">建筑</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="楼层:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select :default-value="listData.floor + ''" @change="handleChange">
          <a-select-option value="1">一层</a-select-option>
          <a-select-option value="2">二层</a-select-option>
          <a-select-option value="3">三层</a-select-option>
          <a-select-option value="4">四层</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </Modal>
</div>
</template>

<script>
import {
  hole
} from "@/api/article.js";
import {
  Modal
} from "ant-design-vue";
export default {
  components: {
    Modal,
  },
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      color: "",
      listData: {
        title: "huo",
        floor: 1,
        color: 0x98fb98,
        heigth: 20,
        category: 1,
        data: null,
        floor_id: null,
      },
      form: this.$form.createForm(this, {
        name: "coordinated",
      }),
    };
  },
  watch: {
    visible(a) {
      // 将颜色变为16进制
      if (!a) {
        this.updatedHole();
      }
      //  this.listData.color=
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    async handleOk(e) {
      this.loading = true;
      console.log(this.listData);
      if (this.listData._id) {
        console.log(this.listData.color);
        this.listData.color = parseInt(this.listData.color.slice(1), 16);
        await hole(this.listData, `/map/hole/${this.listData._id}`);
        this.$message.success("修改成功");
      } else {
        this.listData.color = parseInt(this.listData.color.slice(1), 16);
        await hole(this.listData);
        this.$message.success("添加成功");
      }
      this.visible = false;
      this.$parent.updateDraw();
    },
    updatedHole() {
      this.listData = {
        title: "huo",
        floor: 1,
        category: 1,
        data: null,
        floor_id: null,
      };
      this.loading = false;
    },
    // 新增
    add() {
      this.listData = {
        title: "huo",
        floor: 1,
        category: 1,
        data: null,
        floor_id: null,
      };
    },
    handleCancel() {},
    handleSubmit() {},
    handleChange(val) {
      this.listData.floor = Number(val);
    },
    floorChange(val) {
      this.listData.category = Number(val);
    },
  },
};
</script>
